<template>
    <div class="transfer_container">
        <!-- 左侧框 -->
        <div class="left_transfer border">
            <header class="header_con">
                <div class="header_left">
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">{{titles[0]}}</el-checkbox>
                    <span class="left_total">{{totalleft}}</span>
                </div>
            </header>
            <el-input v-if="filterable" size="mini" :placeholder="filterplaceholder"  class="transfer_search"  prefix-icon="el-icon-search"
                  v-model="searchLeft" @keyup.enter.native="searchKeyLeft(searchLeft)">
                  </el-input>
            <div class="transfer_content">
                <el-checkbox-group v-model="checkedData" @change="handlecheckedDataChange" class="transfer_group">
                    <el-checkbox v-for="item in dataleft" :label="item.label" :key="item.key" :disabled="item.disabled">
                        <span class="span_left" :title="item.tooltip?item.label:''">{{item.label}}</span>
                        <span class="span_right"> <i v-if="item.icon" :class="item.icon"></i> {{item.text}}</span>
                    </el-checkbox>
                </el-checkbox-group>
            </div>
            <footer class="footer_con" v-if="pageBar[0]">
                <pagination 
                v-show="totalleft>0"
                :total="Number(totalleft)" 
                :current-page='currentPage' 
                @pagechange="_currentChangeLeft">
                </pagination>
            </footer>
        </div>
        <!-- 穿梭按键 -->
        <div class="middle_btn">
            <el-button :type="goleft?'info':'primary'" circle class="middle_button" :disabled="goleft" @click="goLeft"><span><i class="el-icon-arrow-left"></i></span></el-button>
            <el-button :type="goright?'info':'primary'" circle class="middle_button" :disabled="goright" @click="goRight"><span><i class="el-icon-arrow-right"></i></span></el-button>
        </div>
        <!-- 右侧框 -->
        <div class="right_transfer border">
            <header class="header_con">
                <div class="header_left">
                    <el-checkbox :indeterminate="isIndeterminateRight" v-model="checkAllRight" @change="handleCheckAllChangeRight">{{titles[1]}}</el-checkbox>
                    <span class="left_total">{{totalright}}</span>
                </div>
            </header>
            <el-input v-if="filterable" size="mini" :placeholder="filterplaceholder" class="transfer_search"  prefix-icon="el-icon-search"
                  v-model="searchRight" @keyup.enter.native="searchKeyRight(searchRight)"></el-input>
            <div class="transfer_content">
                <el-checkbox-group v-model="checkedDataRight" @change="handlecheckedDataChangeRight" class="transfer_group">
                    <el-checkbox v-for="item in dataright" :label="item.label" :key="item.key" :disabled="item.disabled">
                        <span class="span_left" :title="item.tooltip?item.label:''">{{item.label}}</span>
                        <span class="span_right"> <i v-if="item.icon" :class="item.icon"></i> {{item.text}}</span>
                    </el-checkbox>
                </el-checkbox-group>
            </div>
            <footer class="footer_con" v-if="pageBar[1]">
                <pagination 
                v-show="totalright>0"
                :total="Number(totalright)" 
                :current-page='currentPageRight' 
                @pagechange="_currentChangeRight">
                </pagination>
            </footer>
        </div>
    </div>
</template>
<script>
import pagination from "./pagination.vue";
export default {
    name:"transfer",
    data(){
        return{
            searchLeft:"",//左侧搜索条件
            checkAll: false,
            checkedData: [],
            isIndeterminate: false,
            currentPage:1,
            goright:true,
            goleft:true,
            dataleft:[],
            totalleft:0,
            totalright:0,
            dataright:[],
            searchRight:"",//右侧搜索条件
            checkedDataRight: [],
            isIndeterminateRight: false,
            checkAllRight: false,
            currentPageRight:1,
            addLeft:0,
        }
    },
    components:{
        pagination,
    },
    props:{
        titles: {
            type: Array,
            default: function() {
                return ['未选中','已选中'];
            }
        },//自定义标题
        totals: {
            type: Array,
            default: function() {
                return [0,0];
            }
        },//两边总数
        dataArr: {
            type: Array,
            default: function() {
                return [[],[]];
            }
        },//两边数据
        filterable: {
            type: Boolean,
            default: function() {
                return false
            }
        },//是否搜索
        filterplaceholder: {
            type: String,
            default: function() {
                return ''
            }
        },//搜索默认字
        filterType: {
            type: Number,
            default: function() {
                return 0
            }
        },//搜索类型 0：在当前结果中搜索 1：返回给父级通过接口搜索
        pageBar: {
            type: Array,
            default: function() {
                return [true,true]
            }
        },//是否显示底部分页
    },
    mounted(){
        //写入当前total总数
        if(this.totals.length>0){
            this.totalleft=this.totals[0];
            this.totalright=this.totals[1];
        }
        if(!this.pageBar[0]){//如果没有设置分页，就使用滚动加载
            const el = document.querySelector( ".left_transfer .transfer_content");
            const offsetHeight = el.offsetHeight;
            el.onscroll = () => {
                const scrollTop = el.scrollTop;
                const scrollHeight = el.scrollHeight;
                if (offsetHeight + scrollTop - scrollHeight >= -1) {
                    // 需要执行的代码
                    setTimeout(() => {
                        this.currentPage+=1
                        this.$emit("currentChange",'left',this.currentPage)
                    }, 1000);
                }
            };
        }
        if(!this.pageBar[1]){//如果没有设置分页，就使用滚动加载
            const el = document.querySelector( ".right_transfer .transfer_content");
            const offsetHeight = el.offsetHeight;
            el.onscroll = () => {
                const scrollTop = el.scrollTop;
                const scrollHeight = el.scrollHeight;
                if (offsetHeight + scrollTop - scrollHeight >= -1) {
                    // 需要执行的代码
                    setTimeout(() => {
                        this.currentPage+=1
                        this.$emit("currentChange",'right',this.currentPageRight)
                    }, 1000);
                }
            };
        }
    },
    methods:{
        //左侧全选
        handleCheckAllChange(val) {
            if(val){
                this.dataleft.forEach(item=>{
                    this.checkedData.push(item.label)
                })
            }else{
                this.checkedData=[];
            }
            this.isIndeterminate = false;
        },
        // 左侧单独选中
        handlecheckedDataChange() {
            let checkedCount = this.checkedData.length;
            this.checkAll = checkedCount === this.dataleft.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.dataleft.length;
        },
        //搜索关键词
        searchKeyLeft(val){
            if(this.filterType==1){
                this.$emit("searchKeyLeft",val)
            }else{
                if(val!=''){
                    let newData=[];
                    this.dataleft.forEach(item=>{
                        if(item.label==val){
                            newData.push(item)
                        }else if(item.label.includes(val)){
                            newData.push(item)
                        }
                    })
                    this.dataleft=newData
                }else{
                    this.dataleft=JSON.parse(localStorage.getItem("originLeftData"))
                }
            }
        },
        // 右边穿梭到左边
        goLeft(){
            for(let i = this.dataright.length-1;i>=0;i--){
                if(this.checkedDataRight.includes(this.dataright[i].label)){
                    this.dataleft.push(this.dataright[i])
                    this.dataright.splice(i, 1);
                }
            }
            this.totalright=this.totalright-this.checkedDataRight.length
            this.totalleft=this.totalleft+this.checkedDataRight.length
            this.$emit("change",'right',this.checkedDataRight,this.dataleft,this.dataright)
            this.goleft=true
            this.checkedDataRight=[]
            this.isIndeterminateRight = false;
            this.checkAllRight=false
            localStorage.setItem("originLeftData",JSON.stringify(this.dataleft))
        },
        // 左边穿梭到右边
        goRight(){
            for(let i = this.dataleft.length-1;i>=0;i--){
                if(this.checkedData.includes(this.dataleft[i].label)){
                    this.dataright.push(this.dataleft[i])
                    this.dataleft.splice(i, 1);
                }
            }
            this.totalleft=this.totalleft-this.checkedData.length
            this.totalright=this.totalright+this.checkedData.length
            this.$emit("change",'right',this.checkedData,this.dataleft,this.dataright)
            this.goright=true
            this.checkedData=[]
            this.isIndeterminate = false;
            this.checkAll=false
            localStorage.setItem("originRighttData",JSON.stringify(this.dataright))
            
        },
        // 左边分页
        _currentChangeLeft(currentPage){
            this.$emit("currentChange",'left',currentPage)
        },
        // 右侧方法
        //右侧全选
        handleCheckAllChangeRight(val) {
            if(val){
                this.dataright.forEach(item=>{
                    this.checkedDataRight.push(item.label)
                })
            }else{
                this.checkedDataRight=[];
            }
            this.isIndeterminateRight = false;
        },
        // 右侧单独选中
        handlecheckedDataChangeRight() {
            let checkedCount = this.checkedDataRight.length;
            this.checkAllRight = checkedCount === this.dataright.length;
            this.isIndeterminateRight = checkedCount > 0 && checkedCount < this.dataright.length;
        },
        //搜索关键词
        searchKeyRight(val){
            if(this.filterType==1){
                this.$emit("searchKeyRight",val)
            }else{
                if(val!=''){
                    let newData=[];
                    this.dataright.forEach(item=>{
                        if(item.label==val){
                            newData.push(item)
                        }else if(item.label.includes(val)){
                            newData.push(item)
                        }
                    })
                    this.dataright=newData
                }else{
                    this.dataright=JSON.parse(localStorage.getItem("originRighttData"))
                }
            }
        },
        _currentChangeRight(currentPage){
            this.$emit("currentChange",'right',currentPage)
        },

    },
    watch:{
        dataArr:{
            deep:true,
            handler:function(value){
                if(value.length>0){
                    this.dataleft=value[0];
                    localStorage.setItem("originLeftData",JSON.stringify(this.dataleft))
                    this.dataright=value[1];
                    localStorage.setItem("originRighttData",JSON.stringify(this.dataright))
                }
            },
            immediate: true
        },
        checkedData:{
            deep:true,
            handler:function(value){
                if(value.length>0){
                    this.goright=false
                }else{
                    this.goright=true
                }
            },
            immediate: true
        },
        checkedDataRight:{
            deep:true,
            handler:function(value){
                if(value.length>0){
                    this.goleft=false
                }else{
                    this.goleft=true
                }
            },
            immediate: true
        },
    },
}
</script>

<style lang="stylus">
.transfer_container
    display flex
    min-width 625px
    overflow hidden
    .border
        border 1px solid #ddd
        width 40%
        min-width 200px
        min-height 300px
    .left_transfer,.right_transfer
        .header_con
            height: 40px;
            line-height: 40px;
            background: #F5F7FA;
            border-bottom: 1px solid #EBEEF5;
            padding-left: 15px;
            .header_left
                position: relative;
                .left_total
                    position: absolute;
                    right: 15px;
                    color: #909399;
                    font-size: 12px;
                    font-weight: 400;
        .transfer_content
            height 245px
            padding-left: 15px;
            overflow auto
            .transfer_search
                margin-top 10px
            .transfer_group
                display: flex;
                flex-direction: column;
                .el-checkbox
                    margin-right 0
                    margin-top 5px
                    overflow hidden
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    .el-checkbox__label
                        display: inline;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        box-sizing: border-box;
                        width 100%
                        .span_left
                            width 75%
                        .span_right
                            float right
                            margin-right 10px
        .transfer_content::-webkit-scrollbar
            width: 5px;
            height: 1px;
        .transfer_content::-webkit-scrollbar-thumb
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: #d2dfff;
        .transfer_content::-webkit-scrollbar-track 
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 10px;
            background: #EDEDED;
        .footer_con
            height: 40px;
            line-height: 40px;
            background: #F5F7FA;
            border-top : 1px solid #EBEEF5;
    .middle_btn
        padding 0 20px
        display: flex;
        flex-direction: column;
        align-self: center;
        .middle_button
            margin 5px 0
</style>